<template>
	<!-- 20221227 -->
	<view class="user-config-info-page">
		<!-- 页面内容 -->
		<view class="page-content">
			<!-- 用户信息表单 -->
			<form @submit="formSubmit">
				<!-- 头像 -->
				<view class="line">
					<view class="width-100 line-height-120 text-30 text-1a">头像</view>
					<view class="flex-one">
						<ty-image-one-upload @upload="headimgUpload">
							<view class="flex align-center justify-end">
								<image class="head_img jc-avatar-80" mode="aspectFill"
									:src="info.head_img ? info.head_img : defaultHeadImg" style="margin: 0;"></image>
								<text class="margin-left-10 tyIcon-arrow-right text-26 text-98"></text>
							</view>
						</ty-image-one-upload>
					</view>
				</view>

				<!-- 昵称 -->
				<view class="line">
					<view class="width-100 line-height-120 text-30 text-1a">昵称</view>
					<view class="flex-one flex align-center justify-end">
						<input name="nick_name" class="width-100p line-height-120 text-right text-28 text-1a"
							maxlength="20" :value="info.nick_name" placeholder="请输入昵称"
							placeholder-class="text-28 text-aa"></input>
					</view>
				</view>

				<!-- 性别 -->
				<view class="line">
					<view class="width-100 line-height-120 text-30 text-1a">性别</view>
					<view class="flex-one">
						<picker class="width-100p" name="gender" :range="genderList" range-key="name"
							:value="genderIndex" @change="genderChange">
							<view class="line-height-120 flex align-center justify-end">
								<text
									:class="genderIndex != -1 ? 'text-28 text-1a' : 'text-28 text-b3'">{{genderIndex != -1 ? genderList[genderIndex].name : '请选择性别'}}</text>
								<text class="margin-left-10 tyIcon-arrow-right text-26 text-98"></text>
							</view>
						</picker>
					</view>
				</view>

				<!-- 生日 -->
				<view class="line">
					<view class="width-100 line-height-120 text-30 text-1a">生日</view>
					<view class="flex-one">
						<!-- #ifndef MP-ALIPAY -->
						<picker class="width-100p" name="birth_day" mode="date" :value="info.birth_day" :end="today"
							@change="birthdayChange">
							<view class="line-height-120 flex align-center justify-end">
								<text
									:class="info.birth_day ? 'text-28 text-1a' : 'text-28 text-b3'">{{info.birth_day ? info.birth_day : '请选择出生日期'}}</text>
								<text class="margin-left-10 tyIcon-arrow-right text-26 text-98"></text>
							</view>
						</picker>
						<!-- #endif -->

						<!-- #ifdef MP-ALIPAY -->

						<view class="line-height-120 flex align-center justify-end" @click="openDatePicker">
							<text
								:class="info.birth_day ? 'text-28 text-1a' : 'text-28 text-b3'">{{info.birth_day ? info.birth_day : '请选择出生日期'}}</text>
							<text class="margin-left-10 tyIcon-arrow-right text-26 text-98"></text>
						</view>

						<!-- #endif -->

					</view>
				</view>

				<!-- 个性签名 -->
				<view class="padding-30 border-bottom-ed">
					<view class="text-30 text-1a">个性签名</view>
					<view class="margin-top-35">
						<textarea class="sign text-28 text-1a" :show-count="false" name="sign"
							placeholder="介绍一下自己吧，让大家了解和关注你哦～" placeholder-class="text-28 text-aa" maxlength="100"
							v-model="info.sign" />
					</view>

					<!-- 2022.08.19 LYY 安卓机兼容maxlength的时候有可能在手机上是100个字但是长度过100了 -->
					<view class="margin-top-30 flex justify-end text-28 text-1a">
						{{info.sign.length > 100 ? 100 : info.sign.length}}/100
					</view>
				</view>

				<!-- 保存按钮 -->
				<button class="margin-top-90 margin-lr-30 line-height-90 radius-45 bg-main text-center text-32 text-ff"
					form-type="submit">保存</button>
			</form>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

		</view>
	</view>
</template>

<script>
	import user from "../api/user.js"
	export default {
		data() {
			return {
				// 默认头像
				defaultHeadImg: '/static/user/headimg_no.png',
				// 性别选中
				genderIndex: -1,
				// 性别下拉列表
				genderList: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				// 今天的日期
				today: "",
				// 个人信息
				info: {
					sign: ''
				},
			}
		},

		onReady() {
			// 获取今天的日期
			this.today = this.cn.getDate()

			// 获取个人信息
			user.getUserInfo().then(res => {
				if (res.code == 0) {
					this.info = res.data.info
					// 生日
					this.info.birth_day = this.info.birth_day ? this.info.birth_day : 0
					// 选中性别
					this.genderList.forEach((item, index) => {
						if (item.id == this.info.gender) {
							this.genderIndex = index
						}
					})
				}
			})
		},

		methods: {
			

			/**
			 * 头像上传成功（非微信小程序平台）
			 * @date 2022-12-27
			 */
			headimgUpload(res) {
				this.info.head_img = res[0]
			},

			/**
			 * 选择性别
			 * @date 2022-12-27
			 */
			genderChange(e) {
				this.genderIndex = e.detail.value
			},

			/**
			 * 选择生日
			 * @date 2022-12-27
			 */
			birthdayChange(e) {
				this.info.birth_day = e.detail.value
			},

			/**
			 * 支付宝小程序选择日期
			 * @date 2023-02-15
			 */
			openDatePicker() {
				my.datePicker({
					endDate: this.today,
					success: (res) => {
						this.info.birth_day = res.date
					}
				})
			},

			/**
			 * 表单提交
			 * @date 2022-12-27
			 */
			formSubmit(e) {
				if (!this.info.head_img) {
					this.cn.toast("请选择头像")
					return false
				}
				if (!e.detail.value.nick_name) {
					this.cn.toast("请填写昵称")
					return false
				}
				if (e.detail.value.gender == -1) {
					this.cn.toast("请选择性别")
					return false
				}
				if (!this.info.birth_day) {
					this.cn.toast("请选择出生日期")
					return false
				}

				let data = {
					head_img: this.info.head_img,
					nick_name: e.detail.value.nick_name,
					gender: this.genderList[e.detail.value.gender].id,
					birth_day: this.info.birth_day,
					sign: e.detail.value.sign
				}

				// 更新用户信息
				user.updateUserInfo(data).then(res => {
					if (res.code == 0) {
						this.cn.alert(res.msg).then(res => {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.line {
		margin-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #ededed;
	}

	.info {
		width: 200rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: right;
	}

	.sign {
		width: 100%;
		height: 200rpx;
		line-height: 40rpx;
	}
</style>